<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Oppo</title>
    <!-- reset放在最前面，先格式化网页，在引入自己的css -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <div class="head middle">
            <div class="logo headbar">
                <h2>OPPO</h2>
            </div>
            <nav class="menu headbar">
                <ul>
                    <li><a href="">Find系列</a></li>
                    <li><a href="">Reno系列</a></li>
                    <li><a href="">R系列</a></li>
                    <li><a href="">A系列</a></li>
                    <li><a href="">K系列</a></li>
                    <li><a href="">配件</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">商城</a></li>
                </ul>
            </nav>
            <div class="cart headbar">
                <a href="">购物车</a>   
            </div>
        </div>
        <div class="banner">
            <a href=""></a>
        </div>
    </header>
    <main class="clearfix">
        <section>
            <a href="">
            <div class="phone-desc">
                    <h2>OPPO K5</h2>
                    <h3>真硬核 | 玩尽兴</h3>
            </div>
           
            <img src="img/1.webp" alt="">
        </a>
        </section>
        <section>
                <div class="phone-desc">
                        <h2>OPPO K5</h2>
                        <h3>真硬核 | 玩尽兴</h3>
                </div>
            <img src="img/2.webp" alt="">
        </section>
        <section>
                <div class="phone-desc">
                        <h2>OPPO K5</h2>
                        <h3>真硬核 | 玩尽兴</h3>
                </div>
            <img src="img/3.webp" alt="">
        </section>
        <section>
                <div class="phone-desc">
                        <h2>OPPO K5</h2>
                        <h3>真硬核 | 玩尽兴</h3>
                </div>
            <img src="img/4.webp" alt="">
        </section>
    </main>
    <footer>
        <div class="foot middle">
                <div class="foot-top clearfix">
                    <ul class="foot-top-nav">
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                    </ul>
                    <ul class="foot-top-nav">
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                    </ul>
                    <ul class="foot-top-nav">
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                    </ul>
                    <ul class="foot-top-nav">
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                    </ul>
                    <ul class="foot-top-nav">
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                        <li><a href="">推荐产品</a></li>
                    </ul>
                    <div class="contact">
                        联系我们
                    </div>
                </div>
                <div class="foot-bottom">
                    <p class="left">© 2005 - 2019 OPPO 版权所有 粤ICP备08130115号-1 | 隐私 | 用户使用协议 | 联系方式：4001-666-888</p>
                    <p class="right">关注我们：
                        oppp官方 微博
                        关注我们
                        Global</p>
                </div>
        </div>
    </footer>
</body>
</html>